<template>
    <div>
        <div class="orderItem" v-for="order in orders">
            <div class="orderInfo">
                <span class="createTime">{{order.createtime}}</span>
                <span class="orderId">{{order.id}}</span>
                <span class="state">{{getState(order.state)}}</span>
            </div>
            <div v-for="item in order.book" class="bookItem" >
                <div class="img" @click="goodetail(item.b_id)">
                    <img :src="require('../assets/' + item.img)">
                </div>
                <div class="title" @click="godetail(item)">{{item.name}}</div>
                <div class="author">{{item.author}}</div>
                <div class="amount">{{item.amount}}</div>
                <div class="price">￥{{Price(item.total,item.amount)}}</div>
                <div class="total">￥{{item.total}}</div>
            </div>
        </div>
    </div>
</template>
<script>
import axios from "axios"
export default {
    data(){
        return{
            orders:[{
                id:'00000017',
                amount:1,
                total:59,
                state:0,
                createtime:'2018-04-10 22:30:28',
                book:[{
                    amount:1,
                    img:"2.jpg",
                    name:"JavaScript高级程序设计",
                    total:59.4
                }]
            },{
                id:'00000018',
                amount:1,
                total:59,
                state:0,
                createtime:'2018-04-10 22:31:37',
                book:[{
                    amount:1,
                    img:"2.jpg",
                    name:"JavaScript高级程序设计",
                    total:99
                }]
            },{
                id:'00000019',
                amount:1,
                total:59,
                state:0,
                createtime:'2018-04-10 22:34:02',
                book:[{
                    amount:1,
                    img:"2.jpg",
                    name:"JavaScript高级程序设计",
                    total:99
                }]
            },{
                id:'00000020',
                amount:1,
                total:59,
                state:0,
                createtime:'2018-04-10 22:35:30',
                book:[{
                    amount:1,
                    img:"1.jpg",
                    name:"数据库系统概念",
                    total:59
                }]
            },{
                id:'00000021',
                amount:1,
                total:59,
                state:0,
                createtime:'2018-04-10 22:36:10',
                book:[{
                    amount:1,
                    img:"1.jpg",
                    name:"数据库系统概念",
                    total:59
                }]
            }]
        }
    },
    mounted(){
        // axios.get('api/user/getOrderlist')
        //     .then(Response=>{
        //         console.log(Response);
        //         if(Response.code===2){
        //             console.log(Response.msg);
        //             this.orders=[...Response.data]
        //             console.log(this.orders)
        //         }else{
        //             alert(Response.msg);
        //         }
        //     })
    },
    methods:{
        getState(id){
            if(id==0){
                return '等待发货'
            }else if(id==1){
                return '运送中'
            }else if(id==2){
                return '配送中'
            }else{
                return '已签收'
            }
        },
        Price(total,amount){
          return total/amount
      },
    }
}
</script>
<style scoped>

.orderItem{
    display: block;
    overflow: hidden;
    margin-bottom: 20px;
    border: solid lightslategray 1px
}
.img,.title,.author,.amount,.price,.total{
    display: inline-block;
    width: 80px;
    vertical-align: middle
}
.title{
    width: 200px;
}
.img{
    width: 200px;
    margin-top: 10px;
    height: 170px;
    cursor: pointer;
}
/* .img:hover ~.title{
    color: palevioletred
} */
.img>img{
    float: left;
    max-width: 90%;
    max-height: 100%;
}
</style>
